@import "custom_preflight.scss";
@tailwind components;
@tailwind utilities;    

.gradio_bg {
    @apply flex flex-col dark:bg-gray-600;
}

.gradio_page {
    @apply container mx-auto flex flex-col box-border flex-grow text-gray-700 dark:text-gray-50;
    .title {
        @apply text-center p-4 text-4xl;
    }
    .description {
        @apply pb-4;
    }
    .article {
        @apply pt-8 pb-4 max-w-none dark:text-gray-50;
    }
    .content {
        @apply pt-4 px-4 mb-4;
    }
    .api {
        @apply flex-shrink-0 inline-flex gap-1 items-center text-gray-400 justify-end py-2;
    }
    .logo {
        @apply h-6 inline-block;
    }
    .api-logo {
        @apply h-5 inline;
    };
}
.gradio_bg[is_embedded="true"] .gradio_page {
    @apply rounded border-2 border-gray-100 shadow-lg;
    .footer {
        @apply bg-gray-100 p-4 rounded-b;
        a {
            @apply font-semibold;
        }
    }
}
.gradio_bg[is_embedded="false"] {
    @apply min-h-full;
    .gradio_page {
        @apply h-full;
        .content {
            @apply flex-grow flex-shrink-0 pt-4 px-4;
        }
        .footer {
            @apply flex-shrink-0 inline-flex gap-2.5 items-center text-gray-400 justify-center py-2;
        }    
    }
}

.gradio_interface {
    .load_status {
        @apply absolute right-2 flex items-center gap-2 text-sm;
    }
    .load_status img {
        @apply h-5 ml-2 inline-block;
    }
    .load_status .loading {
        @keyframes ld-breath{
            0%{
                animation-timing-function:cubic-bezier(0.9647,0.2413,-0.0705,0.7911);
                transform:scale(0.9)
            }
            51%{animation-timing-function:cubic-bezier(0.9226,0.2631,-0.0308,0.7628);
                transform:scale(1.2)
            }
            100%{transform:scale(0.9)}
        }
        animation:ld-breath 0.75s infinite linear;
    }
    .panels {
        @apply flex flex-wrap justify-center gap-4;
    }
    .panels.unaligned {
        @apply flex-col sm:flex-row items-stretch sm:items-start
    }
    .panels.horizontal {
        @apply flex-col sm:flex-row items-stretch;
    }
    .panels.vertical {
        @apply flex-col items-stretch;
    }
    .panel {
        @apply flex-1;
    }
    .component_set { 
        @apply p-2 rounded flex flex-col flex-1 gap-2;
        min-height: 36px;
    }
    .panel_header {
        @apply mb-1.5;
    }
    .panel_button {
        @apply bg-gray-50 dark:bg-gray-700 flex-1 p-3 rounded transition font-semibold focus:outline-none;
    }
    .panel_buttons {
        @apply flex gap-4 my-4;
    }
    .flag {
        @apply relative;
        .dropcontent {
            @apply hidden absolute top-8 left-0 bg-white border-gray-200 border-2 w-full dark:bg-gray-500 dark:border-none;
            div {
                @apply p-2;
            }
            div:hover {
                @apply bg-gray-100;
            }
        }
    }
    .flag:hover:not(.disabled) {
        .dropcontent {
            @apply block;
        }
    }
    .examples {
        h4 {
            @apply text-lg font-semibold my-2;
        }
        .examples_table_holder {
            @apply overflow-x-auto mt-4 inline-block max-w-full;
        }
        .examples_table_holder:not(.gallery) .examples_table {
            @apply table-auto p-2 bg-gray-50 dark:bg-gray-600 rounded max-w-full border-collapse;
            tbody tr {
                @apply cursor-pointer transition;
            }
            thead {
                @apply border-b-2 dark:border-gray-600;
            }
            tbody tr.selected {
                @apply font-bold;
            }
            td,
            th {
                @apply py-2 px-4;
            }
        }
        .examples_table_holder.gallery .examples_table {
            @apply block;
            tbody {
                @apply flex gap-2 flex-wrap ;
            }
            thead {
                @apply hidden;
            }
            tbody tr.selected {
                @apply font-bold;
            }
            td {
                @apply cursor-pointer p-2 rounded bg-gray-50 dark:bg-gray-700 transition;
            }
        }
        .pages {
            @apply flex gap-1 items-center mt-2;
        }
        .page {
            @apply px-2 py-1 bg-gray-100  dark:bg-gray-700 rounded;
        }
        .page.selected {
            @apply bg-gray-200 dark:bg-gray-800;
        }    
    }
    /* Common Classes */
    .upload_zone {
        @apply border-gray-300 text-gray-400 dark:text-gray-500 dark:border-gray-500 border-8 border-dashed w-full h-full flex justify-center items-center text-3xl text-center cursor-pointer leading-10;
    }
    .edit_buttons {
        @apply z-10 absolute top-0 right-0;
        img {
            @apply h-4 filter dark:invert;
        }
    }
    .edit_button {
        @apply bg-opacity-30 hover:bg-opacity-100 transition p-1;
    }
    .clear_button {
        @apply bg-opacity-30 hover:bg-opacity-100 transition p-1;
    }
    /* Input Components */
    .input_text {
        textarea {
            @apply w-full rounded box-border p-2 resize-none focus:outline-none;
        }
        input {
            @apply w-full rounded box-border p-2 focus:outline-none;
        }
        .interpretation {
            .interpretation_box {
                @apply inline-block whitespace-pre-wrap;
            }
        }
    }
    .input_number {
        input {
            @apply w-full rounded box-border p-2 focus:outline-none;
        }
        .interpretation {
            @apply flex h-6;
            .interpretation_box {
                @apply flex-grow;
            }
        }
    }
    .input_image {
        @apply w-full h-80 relative;
        .image_preview_holder {
            @apply w-full h-full flex justify-center items-center bg-gray-200 dark:bg-gray-600 relative;
        }
        .image_editor {
            @apply fixed w-screen h-screen top-0 left-0 bg-black bg-opacity-50 z-40 flex flex-col justify-center items-center;
            .image_editor_buttons {
                width: 800px;
                @apply flex justify-end gap-1;
                button {
                    @apply px-2 py-1 text-xl bg-black text-white font-semibold rounded-t;
                }
            }
            .tui-image-editor-header-buttons {
                @apply hidden;
            }
            .tui-colorpicker-palette-button {
                width: 12px;
                height: 12px;
            }
        }
        .image_preview,
        video {
            @apply w-full h-full object-contain;
        }
        .sketch > div {
            @apply bg-white;
        }
        .snapshot {
            @apply absolute bottom-4 w-full py-3 font-bold text-lg text-center;
            button {
                @apply inline-block p-2 rounded bg-white dark:bg-gray-600 opacity-80 transition hover:opacity-100 font-semibold;
            }
        }
        .interpretation {
            @apply w-full h-full absolute top-0 left-0 flex justify-center items-center opacity-90 hover:opacity-20 transition;
        }
    }
    .input_image_example {
        @apply h-24 max-w-none;
    }
    .input_radio {
        @apply flex flex-wrap gap-2;
        .radio_item {
            @apply py-2 px-3 font-semibold rounded cursor-pointer flex items-center gap-2;
        }
        .radio_circle {
            @apply w-4 h-4 rounded-full box-border;
        }
    }
    .input_checkbox_group, .input_checkbox {
        @apply flex flex-wrap gap-2;
        .checkbox_item {
            @apply py-2 px-3 font-semibold rounded cursor-pointer flex items-center gap-2;
        }
        .checkbox {
            @apply w-4 h-4 bg-white flex items-center justify-center;
            .check {
                @apply hidden h-3 w-4;
            }
        }
        .selected .checkbox {
            .check {
                @apply block;
            }
        }
        .check line {
            stroke: white;
            stroke-width: 4;
            stroke-linecap: round;
        }
        .interpretation {
            @apply flex;
            .interpretation_box {
                @apply flex-grow h-4 w-4;
            }
            .interpret_check {
                @apply w-full h-full;
            }
            .interpret_check line {
                stroke: gray;
                stroke-width: 4;
                stroke-linecap: round;
            }
        }
    }
    .input_dropdown {
        @apply inline-block relative;
        .dropdown {
            @apply inline-block relative;
        }
        .selector {
            @apply py-2 px-3 font-semibold rounded inline-flex items-center;
        }
        .caret {
            @apply ml-2 fill-current h-4 w-4;
        }
        .dropdown_menu_holder {
            @apply absolute hidden pt-1 z-10 bg-none;
        }
        .dropdown_menu {
            @apply max-h-80 overflow-y-auto; 
        }
        .dropdown_item:first-child {
            @apply rounded-t;
        }
        .dropdown_item {
            @apply py-2 px-3 block whitespace-nowrap cursor-pointer;
        }
        .dropdown_item:last-child {
            @apply rounded-b;
        }
        :hover .dropdown_menu_holder {
            @apply block;
        }
        .interpretation_box {
            @apply p-1;
        }
    }
    .input_slider {
        @apply text-center;
        .range {
            @apply w-full appearance-none transition rounded h-4;
        }
        .range::-webkit-slider-thumb {
            -webkit-appearance: none;
            @apply appearance-none w-5 h-5 rounded cursor-pointer;
        }
        .range::-moz-range-thumb {
            @apply appearance-none w-5 h-5 rounded cursor-pointer;
        }
        .value {
            @apply inline-block mx-auto mt-1 px-2 py-0.5 rounded;
        }
        .interpret_range {
            @apply flex h-6;
            div {
                @apply flex-grow;
            }
        }
    }
    .input_audio {
        .audio-react-recorder {
            @apply hidden;
        }
        .start, .stop {
            @apply p-2 rounded font-semibold;
        }
        .start {
            @apply bg-gray-200 dark:bg-gray-600;
        }
        .stop {
            @apply bg-red-200 text-red-500 dark:bg-red-600 dark:text-red-100;
        }
        audio {
            @apply w-full;
        }
        .edit_buttons {
            @apply static flex justify-end;
        }
        .interpret_range {
            @apply flex h-4;
            div {
                @apply flex-grow h-full;
            }
        }
    }
    .input_video {
        @apply w-full h-80 relative;
        .video_recorder {
            @apply w-full h-full bg-black;
        }
        .record_holder {
            @apply absolute left-1/2 bottom-4 -translate-x-1/2 -translate-y-1/2 text-center;
        }
        .record_message {
            @apply text-white font-bold mb-4;
        }
        .record {
            @apply w-12 h-12 rounded-full bg-red-500 hover:bg-red-600 border-4 border-red-600;
        }
        .video_preview_holder {
            @apply w-full h-full flex justify-center items-center bg-gray-200;
        }
        .video_file_holder {
            @apply w-full h-full flex justify-center items-center text-6xl p-6 break-all;
        }
        .video_preview {
            @apply w-full h-full object-contain bg-black;
        }
    }
    .input_video_example {
        .video_holder {
            @apply h-36 object-contain flex justify-center;
        }
        .video_preview {
            @apply max-w-none;            
        }
    }
    .input_file {
        @apply w-full h-80;
        .file_preview_holder {
            @apply w-full h-full flex flex-col justify-center items-center relative;
        }
        .file_name {
            @apply text-6xl p-6 break-all;
        }
        .file_size {
            @apply text-2xl p-2;
        }
    }
    .input_dataframe {
        table {
            border-collapse: separate;
            @apply border-b border-r border-gray-300 dark:border-gray-600;
            td {
                @apply dark:bg-gray-700 dark:border-gray-600;
            }
            td.selected, tr.selected td:first-child {
                @apply dark:bg-gray-600
            }
            td.highlight {
                @apply dark:bg-gray-800;
            }
        }
        .jexcel_contextmenu {
            display: none;
        }
    }
    .input_timeseries {
        @apply w-full h-96;
    }
    /* Output Components */
    .output_text {
        word-break: break-word;
        @apply w-full bg-white dark:bg-gray-800 rounded box-border p-2 whitespace-pre-wrap;
    }
    .output_label {
        .output_class, 
        .output_class_without_confidences {
            @apply font-bold text-2xl py-6 px-4 flex-grow flex items-center justify-center;
        }
        .confidence_intervals {
            @apply flex text-xl;
        }
        .labels {
            @apply mr-2;
        }
        .confidences {
            @apply flex flex-grow flex-col items-baseline;
        }
        .label {
            @apply overflow-hidden whitespace-nowrap h-7 mb-2 overflow-ellipsis text-right;
        }
        .confidence {
            @apply flex justify-end overflow-hidden whitespace-nowrap h-7 mb-2 px-1;
        }
    }
    .output_image {
        @apply w-full h-80;
        .image_preview_holder {
            @apply w-full h-full flex justify-center items-center bg-gray-200 dark:bg-gray-600 relative;
        }
        .image_preview,
        video {
            @apply w-full h-full object-contain;
        }
    }
    .output_audio {
        audio {
            @apply w-full;
        }
    }
    .output_highlightedtext {
        .category_legend {
            @apply flex flex-wrap gap-1 mb-2;
            .category-label {
                @apply px-2 py-1 rounded text-white font-semibold;
            }
        }
        .color_legend {
            @apply flex px-2 py-1 justify-between rounded mb-3 font-semibold;
            background: -webkit-linear-gradient(to right,#8d83d6,(255,255,255,0),#eb4d4b);
            background: linear-gradient(to right,#8d83d6,rgba(255,255,255,0),#eb4d4b);
        }
        .textfield {
            @apply p-2 bg-white dark:bg-gray-800 rounded box-border max-w-full leading-8 break-all;
            .textspan {
                @apply p-1 mr-0.5 bg-opacity-20 dark:bg-opacity-80 rounded-sm;
                .text {
                    @apply dark:text-white;
                }
            }
            .inline_label {
                @apply text-xs text-white ml-0.5 px-0.5 rounded-sm;
            }
        }
    }
    .output_json {
        @apply font-mono font-semibold;
        .json_node {
            @apply inline;
        }
        .json_node[type="string"] {
            @apply text-green-500;
        }
        .json_node[type="number"] {
            @apply text-blue-500;
        }
        .json_node[type="boolean"] {
            @apply text-red-500;
        }
        .json_node[type="null"] {
            @apply text-gray-500 dark:text-gray-400;
        }
        .json_item {
            @apply block;
        }
        .json_children {
            @apply block pl-4;
        }
    }
    .output_keyvalues {
        table {
            @apply bg-white;
            thead {
                @apply font-bold;
            }
            td,
            th {
                @apply p-2;
            }
        }
    }
    .output_video {
        @apply w-full h-80 object-contain flex justify-center;
        video {
            @apply h-full;
        }
        .video_file_holder {
            @apply w-full h-full flex justify-center items-center text-6xl p-6 break-all;
        }
    }
    .output_file {
        @apply w-full h-80;
        .file_display {
            @apply w-full h-full flex flex-col justify-center items-center relative;
        }
        .file_name {
            @apply text-6xl p-6 break-all;
        }
        .file_size {
            @apply text-2xl p-2;
        }
    }
    .output_dataframe {
        table {
            thead {
                @apply font-bold border-gray-200 border-b-2;
            }
            th {
                @apply transition cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600;
            }
            td,
            th {
                @apply px-4;
            }
            .caret {
                @apply h-3 inline-block ml-1 mb-0.5 fill-current;
            }
        }
        .pages {
            @apply flex gap-1 items-center;
        }
        .page {
            @apply px-2 py-1 bg-gray-200;
        }
        .page.selected {
            @apply bg-gray-200;
        }
    }
    .output_carousel {
        @apply flex flex-col gap-2;
        .carousel_control {
            @apply flex gap-4 justify-center items-center my-1;
            .carousel_index {
                min-width: 60px;
                @apply text-xl text-center font-semibold;
            }
            button .caret {
                @apply h-3 mt-0.5 fill-current;
            }
        }
    }
}